<template>
	<div class="logic">
		<div class="vertical-line"></div>
		<span class="relation-txt" :class="value=='and'?'active':''" @click="relationHandler('and')">且</span>
		<span class="relation-txt" :class="value=='or'?'active':''" @click="relationHandler('or')">或</span>
		<div class="vertical-line"></div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
	name: 'Logic',
	components: {}
})
export default class Logic extends Vue {
	@Prop({default:'and'}) private value!: string
	relationHandler(val:string) {
		this.$emit('input',val)
	}
}
</script>

<style lang="scss" scoped>
.active{
	color: #fff;
	background-color: $blue;
}
.logic {
	width: 30px;
	margin-left: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	.relation-txt {
		padding: 2px;
		cursor: pointer;
	}
	.vertical-line {
		flex: 1;
		width: 1px;
		background-color: $cyan;
	}
}
</style>
